<template>
    <div class="ApplyBox">
        <div>退货商品</div>
        <div class="ApplyBox-table">
            <table class="table">
                <tr class="tr-top">
                    <td>商品图片</td>
                    <td class="shang">商品名称</td>
                    <td>价格/货号</td>
                    <td>属性</td>
                    <td>数量</td>
                    <td>小计</td>
                </tr>
                <tr>
                    <td>
                        <img :src="tableData.productPic" alt="">
                    </td>
                    <td>
                        <div>{{ tableData.productName }}</div>
                        <div>品牌:{{ tableData.productBrand }}</div>
                    </td>
                    <td>
                        <div>价格:{{ tableData.productRealPrice }}</div>
                        <div>货号:NO.{{ tableData.productId }}</div>
                    </td>
                    <td>
                        {{ tableData.productAttr }}
                    </td>
                    <td>
                        {{ tableData.productCount }}
                    </td>
                    <td>
                        ￥:{{ tableData.productRealPrice }}
                    </td>
                </tr>
            </table>
            <div class="he">
                <span>合计:</span>￥{{ tableData.productRealPrice }}
            </div>
        </div>

        <div class="ApplyBox-table2">
            <div>服务单信息</div>
            <table class="table1">
                <tr>
                    <td class="tl">服务单号</td>
                    <td>{{ tableData.id }}</td>
                </tr>
                <tr>
                    <td class="tl">申请状态</td>
                    <td>{{ tableData.handleNote }}</td>
                </tr>
                <tr>
                    <td class="tl">订单编号</td>
                    <td>{{ tableData.orderSn }}
                        <el-button type="primary" plain @click="formInlineId(orderId)">查看</el-button>
                    </td>
                </tr>
                <tr>
                    <td class="tl">申请时间</td>
                    <td>{{ tableData.createTime }}</td>
                </tr>
                <tr>
                    <td class="tl">用户账号</td>
                    <td>{{ tableData.memberUsername }}</td>
                </tr>
                <tr>
                    <td class="tl">联系人</td>
                    <td>{{ tableData.returnName }}</td>
                </tr>
                <tr>
                    <td class="tl">联系电话</td>
                    <td>{{ tableData.returnPhone }}</td>
                </tr>
                <tr>
                    <td class="tl">退货原因</td>
                    <td>{{ tableData.reason }}</td>
                </tr>
                <tr>
                    <td class="tl">描述问题</td>
                    <td>{{ tableData.description }}</td>
                </tr>
                <tr>
                    <td class="tl">凭证图片</td>
                    <td class="timg">{{ tableData.handleNote }}</td>
                </tr>
            </table>
            <table class="table1 tab2">
                <tr>
                    <td class="tl">订单金额</td>
                    <td>￥{{ tableData.productRealPrice }}</td>
                </tr>
                <tr>
                    <td class="tl">确认退款金额</td>
                    <td>
                        ￥ <el-input disabled :placeholder="tableData.returnAmount" />
                    </td>
                </tr>
                <tr>
                    <td class="tl">选择收货点</td>
                    <td>
                        <el-select disabled placeholder="北京"></el-select>
                    </td>
                </tr>
                <tr>
                    <td class="tl">收货人姓名</td>
                    <td>{{ tableData.returnName }}</td>
                </tr>
                <tr>
                    <td class="tl">所在区域</td>
                    <td>北京市 南山区</td>
                </tr>
                <tr>
                    <td class="tl">详细地址</td>
                    <td>科兴科学园</td>
                </tr>
                <tr>
                    <td class="tl">练习电话</td>
                    <td>{{ tableData.returnPhone }}</td>
                </tr>
            </table>

            <table class="table1 tab2">
                <tr>
                    <td class="tl">处理人员</td>
                    <td>{{ tableData.receiveMan }}</td>
                </tr>
                <tr>
                    <td class="tl">处理时间</td>
                    <td>{{ tableData.handleTime }}</td>
                </tr>
                <tr>
                    <td class="tl">处理备注</td>
                    <td>{{ tableData.handleNote }}</td>
                </tr>
            </table>

            <table class="table1 tab2">
                <tr>
                    <td class="tl">收货人员</td>
                    <td>{{ tableData.receiveMan }}</td>
                </tr>
                <tr>
                    <td class="tl">收货时间</td>
                    <td>{{ tableData.receiveTime }}</td>
                </tr>
                <tr>
                    <td class="tl">收货备注</td>
                    <td>{{ tableData.receiveNote }}</td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';

// returnApplydetails
import * as http from '@/request/http'
import { useRoute, useRouter } from 'vue-router';
const router = useRoute()

const routers = useRouter();

console.log(router.query.id)
const id: any = router.query.id

let tableData = ref<any>({});
let orderId = reactive<any>({})


http.order.returnApplyDetails(id).then(res => {
    // console.log(res.data);
    const data = tableData.value = res.data
    // console.log(ta); orderId]
    orderId = data.orderId
})

// 点击查看跳转到订单详情
const formInlineId = (val: number) => {
    routers.push({ path: 'orderDetail', query: { id: val } })
}


</script>

<style scoped lang="less">
table,
tr,
td {
    border: 1px solid #ccc;
    border-collapse: collapse;
}

img {
    width: 80px;
}

// 顶部
.ApplyBox-table {
    width: 1078px;
    padding: 20px;
    margin: 0 auto;
    border: 1px solid #ccc;

    .he {
        color: red;
        padding-top: 10px;
        text-align: right;

        span {
            font-size: 18px;
            color: black;
            margin-right: 14px;
        }
    }

    .table {
        margin: 0 auto;
    }

    td {
        padding: 30px;
        text-align: center;
    }

    .tr-top {
        .shang {
            width: 317px;
        }

        td {
            padding: 15px 25px;
        }
    }
}

// 下边
.ApplyBox-table2 {
    width: 1078px;
    padding: 20px;
    margin: 0 auto;
    border: 1px solid #ccc;
    margin-top: 20px;

    div {
        padding: 10px 0;
        padding-bottom: 20px;
    }

    .table1 {
        td {
            padding: 10px;
            width: 804px;
        }

        .tl {
            background: #f2f6fc;
            width: 238px;
            padding: 10px;
        }

        .timg {
            height: 80px;
        }
    }

    .tab2 {
        margin-top: 15px;

        .el-input {
            width: 230px;
        }
    }
}
</style>